<!--
 * @description:
 * @Author: jhw
 * @Date: 2025-06-27 14:40:57
 * @LastEditors: jhw
 * @LastEditTime: 2025-08-15 10:41:12
-->
<template>
  <div class="pt-20px pb-20px pl-20px pr-20px">
    <h1 class="font-100 text-center text-4xl">低码平台Demo</h1>
    <!-- 按钮组 -->
    <div class="mb-15px">
      <el-button type="primary" :icon="Plus" @click="goToEditor">创建问卷</el-button>
      <el-button type="success" :icon="Compass" @click="goToComMarket">组件市场</el-button>
    </div>
    <!-- 数据表格 -->
    <JTable
      :config="tableConfig"
      :data="tableData"
      :border="false"
      :query-params="queryParams"
      :total="total"
      @pageChange="handleQuery"
    >
      <template #operation="{ row }">
        <el-button type="primary" link size="small" @click="handleDetail(row)">查看</el-button>
        <el-button type="primary" link size="small" @click="handleEdit(row)">编辑</el-button>
        <el-button type="primary" link size="small" @click="handleDelete(row)">删除</el-button>
      </template>
    </JTable>
  </div>
</template>

<script setup lang="ts">
import { deleteSurvey, getSurveyListByPage } from '@/api';
import type { TableConfig } from '@/components/JTable/config';
import JTable from '@/components/JTable/index.vue';
import { usePagination } from '@/utils/pagination';
import { Plus, Compass } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, ref } from 'vue';
// 路由
import { useRouter } from 'vue-router';
const router = useRouter();
const { queryParams, total } = usePagination();
const tableConfig = ref<TableConfig>({
  columns: [
    {
      label: '序号',
      type: 'default',
      prop: 'index',
      width: '70',
    },
    {
      label: '问卷标题',
      prop: 'title',
      type: 'default',
      showOverflowTooltip: true,
    },
    {
      label: '题目数',
      prop: 'surveyCount',
      type: 'default',
      showOverflowTooltip: true,
    },
    {
      label: '创建日期',
      prop: 'createTime',
      type: 'default',
      showOverflowTooltip: true,
    },
    {
      label: '最近更新日期',
      prop: 'updateTime',
      type: 'default',
      showOverflowTooltip: true,
    },
    {
      label: '操作',
      type: 'slot',
      slotName: 'operation',
      width: '300',
    },
  ],
});

const tableData = ref([]);

const goToEditor = () => {
  localStorage.setItem('activeView', 'editor');
  router.push('/editor');
};

const goToComMarket = () => {
  localStorage.setItem('activeView', 'materials');
  router.push('/materials');
};

const handleQuery = async () => {
  tableData.value = [];
  const reqData = {
    ...queryParams.value,
  };
  const { code, data } = await getSurveyListByPage(reqData);
  if (code === 200) {
    tableData.value = data.records;
    total.value = data.total;
  }
};

const handleDetail = (row: any) => {
  router.push({
    name: 'base-component',
    query: {
      id: row.id,
      type: 'detail',
    },
  });
};

const handleEdit = (row: any) => {
  router.push({
    name: 'base-component',
    query: {
      id: row.id,
      type: 'edit',
    },
  });
};

const handleDelete = (row: any) => {
  ElMessageBox.confirm('是否确定删除该问卷？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const { code, data } = await deleteSurvey(row.id);
    if (code === 200 && data) {
      ElMessage.success('删除成功');
      handleQuery();
    }
  });
};

onMounted(() => {
  handleQuery();
});
</script>
